<template>
	<div class="auto-scroll-view" >
		<div class="scroll-header">
			<div 
				:style="{
					width:item.grow?'10px':(item.width?item.width:'auto'),
					flexGrow:item.grow?item.grow:'initial',
					flexShrink:item.grow?'initial':'0',
					justifyContent:item.align?item.align:'flex-start'
				}" 
				v-for="(item,index) in columns" 
				:key="'list-header-cell-'+index">
				{{item.label}}
			</div>
		</div>
		<!-- list body start -->
		<div class="scroll-body">
			<div class="pass-list">
				<auto-scroll :step-speed="$config.base.screen.screen3.scrollSpeed1">
					<div class="no-data" v-if="dataSource1.length===0">暂无数据！</div>
					
					<template v-else>
						<div class="scroll-body-row" v-for="(scope,indexA) in dataSource1" :key="'scroll-body-row-'+indexA">
							<span 
								:style="{
									width:columnItem.grow?'10px':(columnItem.width?columnItem.width:'auto'),
									flexGrow:columnItem.grow?columnItem.grow:'initial',
									flexShrink:columnItem.grow?'initial':'0',
									justifyContent:columnItem.align?columnItem.align:'flex-start'
								}" 
								v-for="(columnItem,indexB) in columns" 
								:key="'list-body-cell-'+indexB"
							>
								<span v-if="columnItem.type==='label'" :class="[
									scope[columnItem.name]==='不合格'?'fail-label':'pass-label'
								]">
									{{scope[columnItem.name]}}
								</span>
								<template v-else-if="columnItem.type==='index'">{{indexA+1}}</template>
								<div class="ellipsis" v-else>{{scope[columnItem.name]}}</div>
							</span>
						</div>
					</template>
					
				</auto-scroll>
			</div>
			<!-- ########################################## -->
			<!-- <div class="unpass-list">
				<auto-scroll :step-speed="$config.base.screen.screen3.scrollSpeed2">
					<div class="no-data" v-if="dataSource2.length===0">无不合格品！</div>
					
					<template v-else>
						<div class="scroll-body-row" v-for="(scope,indexA) in dataSource2" :key="'scroll-body-row-'+indexA">
							<span 
								:style="{
									width:columnItem.grow?'10px':(columnItem.width?columnItem.width:'auto'),
									flexGrow:columnItem.grow?columnItem.grow:'initial',
									flexShrink:columnItem.grow?'initial':'0',
									justifyContent:columnItem.align?columnItem.align:'flex-start'
								}" 
								v-for="(columnItem,indexB) in columns" 
								:key="'list-body-cell-'+indexB"
							>
								<span v-if="columnItem.type==='label'" :class="[
									scope[columnItem.name]==='不合格'?'fail-label':'pass-label'
								]">
									{{scope[columnItem.name]}}
								</span>
								<template v-else-if="columnItem.type==='index'">{{indexA+1}}</template>
								<div class="ellipsis" v-else>{{scope[columnItem.name]}}</div>
							</span>
						</div>
					</template>
					
				</auto-scroll>
			</div> -->
		</div>
		<!-- list body end -->
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import AutoScroll from '@/components/AutoScroll.vue'

const $config = inject('$config')
const props = defineProps({
	dataSource1:{
		type:Array,
		default:function(){
			return []
		}
	},
	dataSource2:{
		type:Array,
		default:function(){
			return []
		}
	}
})

const columns = ref([
	{
		label:'序号',
		type:'index',
		width:'4em',
		align:'center'
	},
	{
		label:'物料名称',
		name:'name',
		grow:1
	},
	{
		label:'单据号',
		name:'collectId',
		grow:1
	},
	{
		label:'项目号',
		name:'projectCode',
		width:'8em'
	},
	{
		label:'数量',
		name:'quantity',
		width:'8em',
		align:'center'
	},
	{
		label:'状态',
		type:'label',
		name:'result',
		width:'8em',
		align:'center'
	},
	{
		label:'收货(未检)时间',
		name:'createdTime',
		width:'11em',
		align:'center'
	}
])
</script>

<style scoped lang="scss">
.scroll-body{
	/* .unpass-list{
		border-top:  dashed 1px gray;
		height: 25%;
		box-sizing: border-box;
	} */
	.pass-list{
		height: 100%;
	}
	.fail-label,.pass-label{
		color: white;
		padding: .2em .4em;
		border-radius: .2em;
	}
	.fail-label{
		background-color: red;
	}
	.pass-label{
		background-color: #2e8b57;
	}
}
</style>